<template>
  <div class="father">
    <div class="title1">
      2020年
      <span>{{form.month}}</span>月 招 聘 团 队 光 荣 榜
    </div>
    <div class="guangrong">
      <el-form label-position="top" :model="form">
        <table
          border="1"
          cellspacing="0"
          cellpadding="0"
          style="border-collapse: collapse;width:100%;border:solid 1px #b2b2b2;"
          class="detailsLine"
        >
          <thead style="font-weight:bold">
            <th class="navtitle">小组名称</th>
            <th class="navtitle">组员</th>
            <th class="navtitle">上周入职</th>
            <th class="navtitle">本周入职</th>
            <th class="navtitle">上月入职</th>
            <th class="navtitle">本月入职</th>
            <th class="navtitle">总入职</th>
            <th class="navtitle">小组总入职数</th>
            <th class="navtitle">小组总目标</th>
          </thead>
          <tbody>
            <template v-for="(item,index) in form.personalList">
              <tr v-for="(m,i) in item.memberList" :class="{'textactive' : m.color}">
                <td v-show="i==0" :rowspan="item.num" class="nav" style="font-weight:bold">{{m.group}}</td>
                <td colspan="1" class="nav">{{m.name}}</td>
                <td colspan="1" class="navi">
                  <div class="other" @click="viewdata(m.name,m.group,'上周入职')">
                  <span   class="num">
                    <img
                      src="../../../static/image/jp.png"
                      width="20px"
                      height="24px"
                      v-if="m.lastWeekNum.top"
                      style="vertical-align: middle;margin-left:-20px;"
                    />
                    {{m.lastWeekNum.num}}
                  </span></div>
                  <!-- <el-input
                    v-if="username == 'zhoulmeng'"
                    class="elinput num"
                    type="number"
                    v-model.number="m.lastWeekNum.num"
                  ></el-input> -->
                </td>
                <td colspan="1" class="navi">
                  <div class="other" @click="viewdata(m.name,m.group,'本周入职')">
                  <span   class="num">
                    <img
                      src="../../../static/image/jp.png"
                      width="20px"
                      height="24px"
                      v-if="m.thisWeekNum.top"
                      style="vertical-align: middle;margin-left:-20px;"
                    />
                    {{m.thisWeekNum.num}}
                  </span></div>
                  <!-- <el-input
                    v-if="username == 'zhoulmeng'"
                    class="elinput num"
                    type="number"
                    v-model.number="m.thisWeekNum.num"
                  ></el-input> -->
                </td>
                <td colspan="1" class="navi">
                  <div class="other" @click="viewdata(m.name,m.group,'上月入职')">
                  <span   class="num">
                    <img
                      src="../../../static/image/jp.png"
                      width="20px"
                      height="24px"
                      v-if="m.lastMonthNum.top"
                      style="vertical-align: middle;margin-left:-20px;"
                    />
                    {{m.lastMonthNum.num}}
                  </span></div>
                  <!-- <el-input
                    v-if="username == 'zhoulmeng'"
                    class="elinput num"
                    type="number"
                    v-model.number="m.lastMonthNum.num"
                  ></el-input> -->
                </td>
                <td colspan="1" class="navi">
                  <div class="other" @click="viewdata(m.name,m.group,'本月入职')">
                  <span   class="num">
                    <img
                      src="../../../static/image/jp.png"
                      width="20px"
                      height="24px"
                      v-if="m.thisMonthNum.top"
                      style="vertical-align: middle;margin-left:-20px;"
                    />
                    {{m.thisMonthNum.num}}
                  </span></div>
                  <!-- <el-input
                    v-if="username == 'zhoulmeng'"
                    class="elinput num"
                    type="number"
                    v-model.number="m.thisMonthNum.num"
                  ></el-input> -->
                </td>
                <td colspan="1" class="navi">
                  <div class="other"  @click="viewdata(m.name,m.group,'总入职')">
                  <span    class="num">
                    <img
                      src="../../../static/image/jp.png"
                      width="20px"
                      height="24px"
                      v-if="m.personalTotal.top"
                      style="vertical-align: middle;margin-left:-20px;"
                    />
                    {{m.personalTotal.num}}
                  </span></div>
                  <!-- <el-input
                    v-if="username == 'zhoulmeng'"
                    class="elinput num"
                    type="number"
                    v-model.number="m.personalTotal.num"
                  ></el-input> -->
                </td>
                <td rowspan="1" class="navi" v-show="i==0" :rowspan="item.num">
                  <div class="other" @click="viewdata(m.name,m.group,'小组总入职数')">
                  <span   class="num1">{{m.groupTotal}}</span></div>
                  <!-- <el-input
                    v-if="username == 'zhoulmeng'"
                    class="elinput num1"
                    type="number"
                    v-model.number="m.groupTotal"
                  ></el-input> -->
                </td>
                <td rowspan="1" class="navi" v-show="i==0" :rowspan="item.num">
                  <span   class="num1">{{m.groupGoal}}</span>
                  <!-- <el-input
                    v-if="username == 'zhoulmeng'"
                    class="elinput num1"
                    type="number"
                    v-model.number="m.groupGoal"
                  ></el-input> -->
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="2" class="nav" style="font-size: 22px;font-weight:bold">合计</td>
              <td colspan="1" class="navi">
                <div class="other" @click="viewdata('合计','合计','上周入职')">
                <span   class="num1">{{form.lastWeekTotalNum}}</span></div>
                <!-- <el-input
                  v-if="username == 'zhoulmeng'"
                  class="elinput num1"
                  type="number"
                  v-model.number="form.lastWeekTotalNum"
                ></el-input> -->
              </td>
              <td colspan="1" class="navi">
                <div class="other" @click="viewdata('合计','合计','本周入职')">
                <span   class="num1">{{form.thisWeekTotalNum}}</span></div>
                <!-- <el-input
                  v-if="username == 'zhoulmeng'"
                  class="elinput num1"
                  type="number"
                  v-model.number="form.thisWeekTotalNum"
                ></el-input> -->
              </td>
              <td colspan="1" class="navi">
                <div class="other" @click="viewdata('合计','合计','上月入职')">
                <span   class="num1">{{form.lastMonthTotalNum}}</span></div>
                <!-- <el-input
                  v-if="username == 'zhoulmeng'"
                  class="elinput num1"
                  type="number"
                  v-model.number="form.lastMonthTotalNum"
                ></el-input> -->
              </td>
              <td colspan="1" class="navi">
                <div class="other" @click="viewdata('合计','合计','本月入职')">
                <span   class="num1">{{form.thisMonthTotalNum}}</span></div>
                <!-- <el-input
                  v-if="username == 'zhoulmeng'"
                  class="elinput num1"
                  type="number"
                  v-model.number="form.thisMonthTotalNum"
                ></el-input> -->
              </td>
              <td colspan="1" class="navi">
                <div class="other" @click="viewdata('合计','合计','总入职')">
                <span   class="num1">{{form.personalTotalNum}}</span></div>
                <!-- <el-input
                  v-if="username == 'zhoulmeng'"
                  class="elinput num1"
                  type="number"
                  v-model.number="form.personalTotalNum"
                ></el-input> -->
              </td>
              <td class="navi">
                <div class="other" @click="viewdata('合计','合计','小组总入职数')">
                <span   class="num1">{{form.groupTotalNum}}</span></div>
                <!-- <el-input
                  v-if="username == 'zhoulmeng'"
                  class="elinput num1"
                  type="number"
                  v-model.number="form.groupTotalNum"
                ></el-input> -->
              </td>
              <td class="navi">
                <span   class="num1">{{form.groupGoalNum}}</span>
                <!-- <el-input
                  v-if="username == 'zhoulmeng'"
                  class="elinput num1"
                  type="number"
                  v-model.number="form.groupGoalNum"
                ></el-input> -->
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" :before-close="cancelSend" class="back1">
      <div class="dialogBox">
        <el-row style="border: 1px solid #ccc;">
          <el-col style="padding-left: 10px;" class="resumepushtable">
            <el-table class="tablelist" ref="mailtable" :data="historydata" border>
              <el-table-column prop="name" label="候选人"></el-table-column>
              <el-table-column prop="sex" label="性别"></el-table-column>
              <el-table-column prop="entryTime" label="入职时间"></el-table-column>
              <el-table-column prop="customer" label="推送客户"></el-table-column>
              <el-table-column prop="position" label="推送职位"></el-table-column>
              <el-table-column prop="recommender" label="组员"></el-table-column>
            </el-table>
            <div class="pager honon">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="pagehandleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,15]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalcount"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-col :span="10">
              <el-button
                type="primary"
                style="font-size:16px;"
                :disabled="disabled"
                @click="sendclick"
              >确 定</el-button>
            </el-col>
            <el-col :span="10">
              <el-button @click="cancelSend">取 消</el-button>
            </el-col>
          </el-col>
        </el-row>
      </div>-->
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  name: "honour",
  data() {
    return {
      secondshow: false,
      timeout: null,
      form: {
        personalList: []
      },
      historydata: [],
      currentPage: 1,
      pagesize: 5,
      totalcount: 0,
      currentRow: null,
      detaildata: "",
      zubie:'',
      title:'',
      dialogFormVisible:false,
      num: [],
      username: "",
      flag: true,
      test1: ""
    };
  },
  created() {
    //获取用户名
    axios.post(this.url + "/user/iflogin").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.username = res.data.data;
      }
    });
    //获取光荣榜
    axios.post(this.url + "/honour/getHonorRoll").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.form = res.data.data;
        // console.log(this.form);
        this.form.personalList = res.data.data.personalList;
      }
    });
  },
  methods: {
    viewdata(val,ol,el) {
      this.detaildata = val;
      this.zubie = ol;
      this.title =el;
      this.dialogFormVisible = true;
      axios
        .post(this.url + "/honour/getHonourDetail", {
          name: this.detaildata,
          group: this.zubie,
          title: this.title,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.historydata = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      axios
        .post(this.url + "/honour/getHonourDetail", {
          name: this.detaildata,
          group: this.zubie,
          title: this.title,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.historydata = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        });
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    pagehandleCurrentChange(val) {
      this.currentPage = val;
      axios
        .post(this.url + "/honour/getHonourDetail", {
          name: this.detaildata,
          group: this.zubie,
          title: this.title,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.historydata = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        });
    },
    cancelSend() {
      this.historydata = [];
      this.currentPage = 1;
      this.disabled = false;
      this.dialogFormVisible = false;
      document.documentElement.style.overflow = "auto";
    },
  },
  watch: {
    form: {
      handler: function(val, oldVal) {
        if (oldVal.personalList.length !== 0) {
          console.log(123);
          let that = this;
          clearTimeout(that.timeout);
          that.timeout = null;
          that.timeout = setTimeout(() => {
            // that.getListPOI(curVal);
            axios
              .post(that.url + "/honour/add", {
                params: that.form.personalList
              })
              .then(res => {
                that.unlogin(res.data.code);
                if (res.data.code == 200) {
                  that.$emit("success");
                }
              });
          }, 1000);
        }
      },
      deep: true
    }
  }
};
</script>
<style scoped>
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.textactive {
  background-color: #fce2c4;
}
.father {
  padding: 20px 0 25px;
  width: 100%;
  /* height: 100%;
    position: absolute; */
  background: url("../../../static/image/grb-bg.jpg") no-repeat;
  background-size: cover;
  text-align: center;
}
.elinput {
  width: 100% !important;
  /* text-indent: 10px; */
  border-radius: 0;
  height: 100%;
  padding-left: 20px;
  /* padding: 0; */
  margin: 0;
  text-align: center;
  border: 0 !important;
  outline: none !important;
}
.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 10px 0;
  text-align: center;
}
.el-pagination {
    margin: 0 -5px;
    padding: 2px 0;
    /* float: left; */
}
.top {
  width: 100%;
  height: 70px;
}
.myTable tr:nth-child(even) {
  /*偶数行 */
  background: #fce2c4;
}
/* 奇数行 */
.myTable tr:nth-child(odd) {
  background: #fff;
}
.detailsLine tbody tr td:nth-child(1),td:nth-child(8),td:nth-child(9){
  background-color: #fff;
}
/* .detailsLine tbody tr:nth-child(10){
  background-color: #fce2c4;
}
.detailsLine tbody tr:nth-child(10) td:nth-child(1),td:nth-child(8),td:nth-child(9){
  background-color: #fff;
}
.detailsLine tbody tr:nth-child(11){
  background-color: #fff!important;
}
.detailsLine tbody tr:nth-child(12){
  background-color: #fce2c4;
}
.detailsLine tbody tr:nth-child(12) td:nth-child(8),td:nth-child(9){
  background-color: #fff;
}
.detailsLine tbody tr:nth-child(13){
  background-color: #fff!important;
}
.detailsLine tbody tr:nth-child(14){
  background-color: #fce2c4;
}
.detailsLine tbody tr:nth-child(14) td:nth-child(1),td:nth-child(8),td:nth-child(9){
  background-color: #fff;
}
.detailsLine tbody tr:nth-child(15){
  background-color: #fff!important;
} */
.guangrong {
  width: 87%;
  padding: 20px 30px;
  margin-bottom: 10px;
  /* height: 100vh; */
  margin: 0 auto;
  background-color: #fff;
}
.num {
  font-size: 20px;
  /* text-align: center; */
}
.num1 {
  font-size: 24px;
  /* text-align: center; */
}
.title1 {
  font-weight: bold;
  width: 100%;
  text-align: center;
  font-size: 48px !important;
  margin: 0 0 15px;
  color: #fff;
  font-family: STXingkai;
}
.other {
  cursor: pointer;width:100%;text-align:center;
}
.other:hover{color:#ff9224;}
.nav {
  text-align: center;
  width: 150px;
  height: 30px;
  color: #3d3d3d;
  font-size: 20px;
  font-style: normal;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border: 0.5pt solid #e6e6e6;
  padding: 5px;
}
.navtitle {
  text-align: center;
  width: 150px;
  height: 30px;
  background-color: #ab2022;
  color: #fff;
  font-size: 22px;
  font-style: normal;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border: 0.5pt solid #e6e6e6;
  padding: 7px;
}
.navi {
  text-align: center;
  width: 150px;
  /* background-color:  #8ebbe7; */
  height: 30px;
  color: #3d3d3d;
  font-size: 20px;
  font-style: normal;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border: 0.5pt solid #e6e6e6;
  padding: 5px;
}
</style>